<template>
    <el-col :span="24" class="header">
        <el-col :span="3" style="font-size: 20px;text-align: center">
            {{sysName}}
        </el-col>
        <el-col :span="1">
            <div class="tools" @click.prevent="collapse">
                <i class="el-icon-menu"></i>
            </div>
        </el-col>
        <el-col :span="16">
        </el-col>

        <el-col :span="4" class="userinfo">
            <el-dropdown trigger="hover">
                    <span class="el-dropdown-link userinfo-inner"><img
                            :src="this.sysUserAvatar"/>刘牌</span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>我的消息</el-dropdown-item>
                    <el-dropdown-item>设置</el-dropdown-item>
                    <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-col>
    </el-col>
</template>

<script>
    export default {
        name: "HeaderBar",
        data(){
            return{
                sysName: '人间草木管理系统',
                collapsed: false,
                sysUserName: 'steak',
                sysUserAvatar: require('../assets/吉他.jpg'),
            }
        },

        methods: {
            //退出登录
            logout() {
                var _this = this;
                this.$confirm('确认退出吗?', '提示', {
                    //type: 'warning'
                }).then(() => {
                    removeToken('tokenKey')
                    _this.$router.push('/login');
                }).catch(() => {

                });


            },
            //折叠导航栏
            collapse: function () {
                this.collapsed = !this.collapsed;
            },
            showMenu(i, status) {
                this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none';
            },
        },
    }
</script>

<style scoped>

</style>